<template>
  <div class="parent-box">
    <div class="box">
      <div v-for="(question, index) in questions" :key="index">
        <div id="top">
          <div class="center-text">
            <p>试题类型：</p>
          </div>
          <div class="radio">
            <div
              class="button"
              :class="{
                unselected: question.questionType != 1,
                selected: question.questionType === 1,
              }"
              @click="selectButton(1, index)"
            >
              单选题
            </div>
          </div>
          <div class="radio">
            <div
              class="button"
              :class="{
                unselected: question.questionType != 2,
                selected: question.questionType === 2,
              }"
              @click="selectButton(2, index)"
            >
              多选题
            </div>
          </div>
          <div class="radio">
            <div
              class="button"
              :class="{
                unselected: question.questionType != 3,
                selected: question.questionType === 3,
              }"
              @click="selectButton(3, index)"
            >
              判断题
            </div>
          </div>
          <div class="radio">
            <div
              class="button"
              :class="{
                unselected: question.questionType != 4,
                selected: question.questionType === 4,
              }"
              @click="selectButton(4, index)"
            >
              填空题
            </div>
          </div>
          <div class="right-box">
            <div class="right">
              <a-button @click="delQuestion(index)" type="primary">
                删除题干
              </a-button>
            </div>
          </div>
        </div>
        <!-- 判断题 -->
        <div v-if="question.questionType == 3" class="question-item">
          <!-- 题干 -->
          <div class="question-statement">
            <div class="top-text">试题题干：</div>
            <div>
              <a-textarea
                :cols="160"
                name="statement"
                id="statement"
                v-model:value="question.statement"
                placeholder="题目内容"
                :rows="5"
                @input="updateQuestion"
              />
            </div>
          </div>

          <!-- 选项 -->
          <div class="options">
            <div class="top-text">选项设置：</div>
            <div>
              <div
                v-for="(option, optionIndex) in question.questionOptions"
                :key="optionIndex"
                class="option-row"
              >
                <div class="option-content">
                  <b style="font-weight: bold">
                    (选项{{ String.fromCharCode(65 + optionIndex) }})
                  </b>
                  <a-textarea
                    name="statement"
                    id="statement"
                    @input="
                      updateOption(index, optionIndex, $event.target.value)
                    "
                    :value="option"
                    placeholder="选项内容"
                    :rows="4"
                    :cols="160"
                  />
                </div>
              </div>
            </div>
          </div>

          <!-- 正确选项 -->
          <div class="correct-option">
            <div class="top-text">正确选项：</div>
            <div>
              <div>
                <span
                  v-for="(option, optionIndex) in question.questionOptions"
                  :key="optionIndex"
                  @click="selectOption(index, optionIndex)"
                  :class="{
                    'selected-option': isSelectedOption(index, optionIndex),
                  }"
                >
                  选项{{ String.fromCharCode(65 + optionIndex) }}
                </span>
              </div>
            </div>
          </div>
        </div>
        <!-- 填空题 -->
        <div v-else-if="question.questionType == 4" class="question-item">
          <!-- 题干 -->
          <div class="question-statement">
            <div class="top-text">试题题干：</div>
            <div>
              <a-textarea
                :cols="160"
                name="statement"
                id="statement"
                v-model:value="question.statement"
                placeholder="题目内容"
                :rows="5"
                @input="updateQuestion"
              />
            </div>
          </div>
        </div>
        <!-- 选择题 -->
        <div v-else class="question-item">
          <!-- 题干 -->
          <div class="question-statement">
            <div class="top-text">试题题干：</div>
            <div>
              <a-textarea
                :cols="160"
                name="statement"
                id="statement"
                v-model:value="question.statement"
                placeholder="题目内容"
                :rows="5"
                @input="updateQuestion"
              />
            </div>
          </div>

          <!-- 选项 -->
          <div class="options">
            <div class="top-text">选项设置：</div>
            <div>
              <div
                v-for="(option, optionIndex) in question.questionOptions"
                :key="optionIndex"
                class="option-row"
              >
                <div class="option-content">
                  <b style="font-weight: bold">
                    (选项{{ String.fromCharCode(65 + optionIndex) }})
                  </b>
                  <a-textarea
                    name="statement"
                    id="statement"
                    @input="
                      updateOption(index, optionIndex, $event.target.value)
                    "
                    :value="option"
                    placeholder="选项内容"
                    :rows="4"
                    :cols="140"
                  />
                </div>
                <div class="option-action">
                  <div class="button-group">
                    <a-button
                      style="margin: 5px 0"
                      @click="up(index, optionIndex)"
                      v-if="optionIndex != 0"
                      type="primary"
                    >
                      上移
                    </a-button>
                    <a-button
                      style="margin: 5px 0"
                      @click="delOption(index, optionIndex)"
                      type="primary"
                      danger
                    >
                      删除
                    </a-button>
                    <a-button
                      style="margin: 5px 0"
                      @click="under(index, optionIndex)"
                      v-if="isShowUnder(index, optionIndex)"
                      type="primary"
                    >
                      下移
                    </a-button>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <!-- 正确选项 -->
          <div class="correct-option">
            <div class="top-text">正确选项：</div>
            <div>
              <div>
                <span
                  v-for="(option, optionIndex) in question.questionOptions"
                  :key="optionIndex"
                  @click="selectOption(index, optionIndex)"
                  :class="{
                    'selected-option': isSelectedOption(index, optionIndex),
                  }"
                >
                  选项{{ String.fromCharCode(65 + optionIndex) }}
                </span>
              </div>
            </div>
            <div>
              <a-button @click="addOption(index)" type="primary">
                添加选项
              </a-button>
            </div>
          </div>
        </div>
        <!-- 题目解释 -->
        <div>
          <!-- 题目解释 -->
          <div class="question-statement">
            <div class="top-text">题目解释：</div>
            <div>
              <a-textarea
                :cols="160"
                name="statement"
                id="statement"
                v-model:value="question.answers"
                placeholder="题目解释"
                :rows="5"
                @input="updateQuestion"
              />
            </div>
          </div>
        </div>
      </div>

      <div class="add-question-button">
        <a-button @click="addQuestion" type="primary">添加题干</a-button>
      </div>
    </div>
  </div>
</template>
<script>
  import { Modal } from 'ant-design-vue'

  export default {
    name: 'question',
    components: {},
    props: {
      _questions: {
        type: Array,
        default: function () {
          return [
            {
              questionType: 1, // 试题类型 1 单选 2 多选 3 判断 4 填空
              statement: '', // 题干
              questionOptions: ['', '', ''], // 选项
              correctOptions: [], // 选中选项
              answers: '', //解释
            },
          ]
        },
      },
    },
    data() {
      return {
        questions: this._questions,
      }
    },
    watch: {},
    methods: {
      updateQuestion() {
        this.$emit('video-uploaded', this.questions)
      },
      delQuestion(index) {
        Modal.confirm({
          title: 'Confirm',
          content: '确定要删除吗？',
          okText: '确认',
          cancelText: '取消',
          onOk: () => {
            this.questions.splice(index, 1)
            this.updateQuestion()
          },
        })
      },
      up(index, optionIndex) {
        if (optionIndex - 1 >= 0) {
          const questionOptions = this.questions[index].questionOptions
          let valueToInsert = questionOptions[optionIndex] // 获取要插入的值
          questionOptions.splice(optionIndex, 1) // 先将该值从原位置删除
          questionOptions.splice(optionIndex - 1, 0, valueToInsert) // 在前一个位置插入该值

          // 如果选中了正确答案，也需要一并加
          const correctOptions = this.questions[index].correctOptions

          let current = correctOptions.includes(optionIndex)
          let next = correctOptions.includes(optionIndex - 1)

          // 将当前位置-1
          if (current) {
            let index = correctOptions.indexOf(optionIndex)
            correctOptions[index] -= 1
          }

          // 将上一个位置+1
          if (next) {
            let index = correctOptions.indexOf(optionIndex - 1)
            correctOptions[index] += 1
          }
        }
        this.updateQuestion()
      },
      under(index, optionIndex) {
        const questionOptions = this.questions[index].questionOptions
        if (optionIndex < questionOptions.length - 1) {
          let valueToInsert = questionOptions[optionIndex] // 获取要插入的值
          questionOptions.splice(optionIndex, 1) // 先将该值从原位置删除
          questionOptions.splice(optionIndex + 1, 0, valueToInsert) // 在前一个位置插入该值

          // 如果选中了正确答案，也需要一并减
          const correctOptions = this.questions[index].correctOptions

          let current = correctOptions.includes(optionIndex)
          let next = correctOptions.includes(optionIndex + 1)

          // 将当前位置-1
          if (current) {
            let index = correctOptions.indexOf(optionIndex)
            correctOptions[index] += 1
          }

          // 将上一个位置+1
          if (next) {
            let index = correctOptions.indexOf(optionIndex + 1)
            correctOptions[index] -= 1
          }
        }
        this.updateQuestion()
      },
      isShowUnder(index, optionIndex) {
        const length = this.questions[index].questionOptions.length
        return optionIndex < length - 1
      },
      addQuestion() {
        this.questions.push({
          questionType: 1, // 试题类型 1 单选 2 多选
          statement: '', // 题干
          questionOptions: ['', '', ''], // 选项
          correctOptions: [], // 选中选项
        })
        this.updateQuestion()
      },
      addOption(index) {
        this.questions[index].questionOptions.push('')
        this.updateQuestion()
      },
      delOption(index, optionIndex) {
        const options = this.questions[index].questionOptions
        this.questions[index].questionOptions = options.filter(
          (value, index) => {
            return optionIndex != index
          }
        )
        this.updateQuestion()
      },
      updateOption(questionIndex, optionIndex, newValue) {
        this.questions[questionIndex].questionOptions[optionIndex] = newValue
        this.updateQuestion()
      },
      selectButton(type, index) {
        //   判断题
        if (type == 3) {
          Modal.confirm({
            title: 'Confirm',
            content: '选择判断题会清空选项',
            okText: '确认',
            cancelText: '取消',
            onOk: () => {
              //   更改按钮样式
              this.questions[index].questionType = type
              this.questions[index].correctOptions = [0]
              this.questions[index].questionOptions = ['正确', '错误']
            },
          })
          //   填空题
        } else if (type == 4) {
          //   更改按钮样式
          this.questions[index].questionType = type
          console.log('填空题')
          //   选择题
        } else {
          //   更改按钮样式
          this.questions[index].questionType = type
          // 切换单选题需要把选项置为第一个
          if (type === 1) {
            if (this.questions[index].correctOptions.length > 0) {
              this.questions[index].correctOptions = [
                this.questions[index].correctOptions[0],
              ]
            }
          }
          this.questions[index].questionOptions = ['', '', '']
        }
        this.updateQuestion()
      },
      selectOption(questionIndex, optionIndex) {
        const question = this.questions[questionIndex]
        const questionType = question.questionType
        const correctOptions = question.correctOptions
        // 将选项索引转换为字母
        //   const option = String.fromCharCode(65 + optionIndex);

        console.log(optionIndex)
        // 单选跟判断直接清空然后添加这一个
        if (questionType == 1 || questionType == 3) {
          if (correctOptions.includes(optionIndex)) {
            // 如果已选中，取消选中
            question.correctOptions = []
          } else {
            // 如果未选中，添加选中
            question.correctOptions = [optionIndex]
          }
        } else {
          if (correctOptions.includes(optionIndex)) {
            // 如果已选中，取消选中
            question.correctOptions = correctOptions.filter(
              (item) => item !== optionIndex
            )
          } else {
            // 如果未选中，添加选中
            question.correctOptions = [...correctOptions, optionIndex]
          }
        }
        this.updateQuestion()
      },
      isSelectedOption(questionIndex, optionIndex) {
        const question = this.questions[questionIndex]
        // 将选项索引转换为字母
        //   const option = String.fromCharCode(65 + optionIndex);

        return question.correctOptions.includes(optionIndex)
      },
    },
  }
</script>

<style scoped>
  /* 设置整个页面的高度为100% */
  html,
  body {
    height: 100%;
    margin: 0;
    padding: 0;
  }
  .parent-box {
    display: flex;
    justify-content: center; /* 水平居中 */
    align-items: center; /* 垂直居中 */
    width: 100%;
    height: 100%;
    padding-top: 20px;
    padding-bottom: 20px;
    padding-left: 20px;
    /* overflow: hidden; */
  }

  .box {
    width: 1450px;
    height: 100%;
  }

  /* 设置上方按钮区域样式 */
  #top {
    display: flex;
    flex-direction: row;
    /* align-items: center; */
    padding: 10px;
  }

  /* 设置中间内容区域样式 */
  #content {
    margin-top: 50px; /* 考虑上方固定区域的高度 */
    padding: 10px;
    height: 100%; /* 计算剩余高度，并限制滚动 */
    overflow: hidden;
    overflow-y: auto; /* 添加垂直滚动条 */
    width: 100%;
  }

  .question-item {
    width: 100%;
  }

  .question-statement {
    display: flex;
    flex-direction: row;
    /* align-items: center; */
    padding: 10px;
  }

  .top-text {
    flex: 0 0 auto;
    font-size: 17px;
    color: #1677ff;
    font-weight: 700;
  }

  #statement {
    flex: 1 1 auto;
    width: 100%;
    box-sizing: border-box;
  }

  .options {
    display: flex;
    flex-direction: row;
    padding: 10px;
  }

  .correct-option span {
    margin-right: 15px; /* 可根据需要调整间距值 */
    font-size: 16px;
    cursor: pointer;
  }

  .correct-option {
    display: flex;
    flex-direction: row;
    padding: 10px;
    height: 100px;
  }

  #content::-webkit-scrollbar {
    width: 0.5em; /* 设置滚动条宽度 */
    background-color: transparent; /* 设置滚动条背景颜色 */
  }

  #content::-webkit-scrollbar-thumb {
    background-color: transparent; /* 设置滚动条拖动块颜色 */
  }

  #content::-webkit-scrollbar-thumb:hover {
    background-color: transparent; /* 设置滚动条拖动块在鼠标悬停时的颜色 */
  }

  /* 设置下方按钮区域样式 */
  #bottom {
    position: fixed;
    bottom: 0;
    width: 100%;
    background-color: #f2f2f2;
    padding: 10px;
  }
  /* 按钮样式 */
  .button {
    padding: 8px 20px;
    background-color: #1677ff;
    color: white;
    text-align: center;
    text-decoration: none;
    font-size: 16px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
  }

  /* 选中状态样式 */
  .selected {
    background-color: #1677ff;
    color: white;
    border: 1px solid #1677ff;
  }

  /* 选中状态样式 */
  .selected-option {
    /* background-color: #4caf50; */
    color: #1677ff;
    /* border: 1px solid #4caf50; */
  }

  /* 未选中状态样式 */
  .unselected {
    background-color: #fff;
    color: black;
    border: 1px solid #1677ff;
  }

  .center-text {
    text-align: center;
    margin-right: 10px; /* 添加间距 */
    font-size: 17px;
    color: #1677ff;
    font-weight: 700;
  }
  .radio {
    display: flex;
    align-items: center;
    margin-left: 10px; /* 添加间距 */
  }

  .add-question-button {
    height: 100px;
    margin-left: 80px;
    margin-bottom: 50px;
  }
  .option-content {
    flex-grow: 1;
  }

  .option-row {
    display: flex;
    align-items: center;
    margin-bottom: 10px; /* 可根据需要调整间距 */
  }

  .option-action {
    display: flex;
    align-items: center;
  }

  .button-group {
    margin-left: 10px;
    display: flex;
    flex-direction: column;
    padding-top: 25px;
    justify-content: space-between; /* 或其他 justify-content 值 */
  }

  textarea:focus {
    outline: none;
    border-color: #007bff;
    box-shadow: 0 0 4px rgba(0, 123, 255, 0.6);
  }

  .right {
    margin-left: 700px;
  }
</style>
